   // pages/circle/index.js
   const app = new getApp();

   Page({

       /**
        * 页面的初始数据
        */
       data: {
           isShow: 'display',
           navData: [],
           currentTab: 0,
           navScrollLeft: 0,
           pixelRatio: 0,
           circle_list: [],
           scroll_top: 0,
           scrollHeight: 0,
           hidden: true,
           curr_page : 1,
           is_no:true
       },

       /**
        * 生命周期函数--监听页面加载
        */
       onLoad: function(options) {
           wx.getSystemInfo({
               success: (res) => {
                   this.setData({
                       pixelRatio: res.pixelRatio,
                       windowHeight: res.windowHeight,
                       windowWidth: res.windowWidth,
                       scrollHeight: res.windowHeight
                   })
               },
           });
           // 获取并设置scroll-wrap的高度
           let self = this;
           const query = wx.createSelectorQuery()
           query.select('#scroll-wrap').boundingClientRect()
           query.selectViewport().scrollOffset()
           query.exec(function(res) {
               //console.log(res);
               // self.data.height = res[0].height;
               self.setData({
                   height: res[0].height
               });
           })
           //获取导航栏信息
           self.getNav();
           //获取圈子内容
           self.getCirclelist();
       },

       /**
        * 生命周期函数--监听页面初次渲染完成
        */
       onReady: function() {

       },

       /**
        * 生命周期函数--监听页面显示
        */
       onShow: function() {
           var that = this;
           that.getCirclelist();
       },

       /**
        * 生命周期函数--监听页面隐藏
        */
       onHide: function() {

       },

       /**
        * 生命周期函数--监听页面卸载
        */
       onUnload: function() {

       },

       /**
        * 页面相关事件处理函数--监听用户下拉动作
        */
       onPullDownRefresh: function() {
           // console.log('进来了');
           var that = this;
           // 显示顶部刷新图标
           wx.showNavigationBarLoading();
           // 模拟加载
           setTimeout(function() {
               // complete
               wx.hideNavigationBarLoading(); //完成停止加载
               wx.stopPullDownRefresh(); //停止下拉刷新
               that.setData({
                   marginTop: 0
               });
           }, 1500);
       },

       /**
        * 页面上拉触底事件的处理函数
        */
       onReachBottom: function() {
           //console.log("上拉");
           this.onLoad();
       },

       /**
        * 用户点击右上角分享
        */
       onShareAppMessage: function() {

       },
       //获取圈子内容
       getCirclelist: function() {
           var that = this;
           var userid = app.globalData.openid;
           wx.request({
               url: app.globalData.serverUrl + 'circlelistinfo',
               data:{
                 userid:userid
               },
               success: function(res) {
                 console.log(res);
                   if (res.data.status == 0 ) {
                       that.setData({
                           circle_list: [],
                           is_no: false
                       });
                   }else{
                     that.setData({
                       circle_list: res.data,
                       is_no:true
                     });
                   }
               }
           })
       },

       //获取导航栏信息
       getNav: function() {
           var that = this;
           wx.request({
               url: app.globalData.serverUrl + 'navinfo',
               success: function(res) {
                   if (res) {
                       that.setData({
                           navData: res.data
                       });
                   }
               }
           })
       },
       // 导航条
       switchNav(event) {
           var cur = event.currentTarget.dataset.current;
           //每个tab选项宽度占1/5
           var singleNavWidth = this.data.windowWidth / 5;
           //tab选项居中                            
           this.setData({
               navScrollLeft: (cur - 2) * singleNavWidth
           })
           if (this.data.currentTab == cur) {
               return false;
           } else {
               this.setData({
                   currentTab: cur
               })
           }
       },
       // 切换内容
       switchTab(event) {
           //console.log(event);
           var cur = event.detail.current;
           var that = this;
           var singleNavWidth = that.data.windowWidth / 5;
           var typename = that.data.navData[cur];
           var userid = app.globalData.openid;
           console.log(typename);
           if (cur) {
               wx.request({
                 url: app.globalData.serverUrl + 'circlelistinfo',
                   data: {
                     typename: typename,
                     userid:userid
                   },
                   success: function(res) {
                     console.log(res);
                       if (res.data.status == 0){
                           that.setData({
                               circle_list:[],
                               is_no:false
                           })
                       }else{
                            that.setData({
                              circle_list: res.data,
                              is_no: true
                            })
                       }
                   }
               })
           }
           that.setData({
               currentTab: cur,
               navScrollLeft: (cur - 2) * singleNavWidth
           });
       },

       // 获取焦点
       searchfocus: function(e) {
           //console.log(e);
       },
       // 失去焦点
       searchblur: function(e) {
           //console.log(e);
       },
       // 搜索框输入
       serchinput: function(e) {
           //console.log(e); 
           if (e.detail.value) {
               this.setData({
                   // content: e.detail.value,
                   isShow: 'none'
               });
           } else {
               this.setData({
                   isShow: 'display'
               });
           }
       },
       // 搜索
       search: function(e) {
           //console.log(e);
       },
       // 跳转跳转到详情页
       onTapdetail: function(e) {
           //console.log(e);
           var postId = e.currentTarget.dataset.postid;
           wx.navigateTo({
               // 跳转传参算数
               url: '/pages/circle/details?id=' + postId
           });
       },
       //增加爱心
       onHeart: function(e) {
           var postId = e.currentTarget.dataset.postid;
           var user_id = app.globalData.openid
           var that = this;
           wx.request({
               url: app.globalData.serverUrl + 'heartadds',
               data: {
                   id: postId,
                   userid: user_id
               },
               success: function(res) {
                   //console.log(res);
                   if (res.data.status == 1) {
                       that.setData({
                               heart_num: res.data.num,
                               is_gz: res.data.is_gz
                           }),
                           wx.showToast({
                               title: 'ok~',
                               icon: 'success',
                               mask: true,
                               success: function(e) {
                                   that.getCirclelist();
                               }
                           })
                   } else if (res.data.status == 2) {
                       wx.showToast({
                           title: '请先登录',
                           icon: 'none',
                           duration: 2000
                       })
                   } else {
                       wx.showToast({
                           title: '点击失败，请重新尝试',
                           icon: 'none',
                           duration: 2000
                       })
                   }
               },
               fail: function(res) {},
               complete: function(res) {},
           })
       },
       // 跳转到添加页面
       onTapaddcircle: function() {
           wx.navigateTo({
               // 跳转传参算数
               url: '/pages/circle/addcircle'
           });
       },
       //跳转到搜索页面
       onTapsearchcircle: function() {
           wx.navigateTo({
               url: '/pages/circle/searchcircle'
           });
       },
       // start: 触摸开始
       start_fn(e) {
           //console.log(e);
           let self = this;
           let touch_down = e.touches[0].clientY;
           self.setData({
               touch_down: touch_down
           });
           // this.data.touch_down = touch_down;
           // 获取并设置inner-wrap 的高度
           const query = wx.createSelectorQuery()
           query.select('#inner-wrap').boundingClientRect()
           query.selectViewport().scrollOffset()
           query.exec(function(res) {
               //console.log(res);
               // self.data.inner_height = res[0].height;
               self.setData({
                   inner_height: res[0].height
               });
               // res[0].top // #the-id节点的上边界坐标
               // res[1].scrollTop // 显示区域的竖直滚动位置
           })

           // 获取 scroll-wrap 的高度和当前的 scrollTop 位置
           wx.createSelectorQuery().select('#scroll-wrap').fields({
               scrollOffset: true,
               size: true
           }, function(rect) {
               //console.log(rect);
               // self.data.start_scroll = rect.scrollTop;
               // self.data.height = rect.height;
               self.setData({
                   start_scroll: rect.scrollTop,
                   height: rect.height
               });
           }).exec();

       },
       // end: 触摸开始
       // start： 触摸结束
       end_fn(e) {
           //console.log(e);
           let current_y = e.changedTouches[0].clientY;
           let self = this;
           let {
               start_scroll,
               inner_height,
               height,
               touch_down
           } = this.data;
           /**
            * 1、下拉刷新
            * 2、上拉加载
            */
           //console.log(inner_height, height);
           let scroll_height = Math.ceil(inner_height - height);
           if (current_y > touch_down && current_y - touch_down > 30 && start_scroll == 0) {
               
               var that = this;
               //检测到下拉刷新的动作，就可是请求后台获取新数据替换已有的数据
               wx.request({
                   url: app.globalData.serverUrl + 'circlelistinfo',
                   data: {
                       status: 'down',
                   },
                   success: function(res) {
                       //console.log(1,res);
                       if (res) {
                           that.setData({
                               circle_list: res.data
                           });
                       }
                   }
               })
               // let marginTop = current_y - touch_down;
               that.setData({
                   marginTop: 30
               });
               wx.startPullDownRefresh();
               // 下拉刷新 的请求和逻辑处理等
           } else if (current_y < touch_down && touch_down - current_y >= 10 && scroll_height == start_scroll) {
               // 上拉加载 的请求和逻辑处理等
               console.log('123上拉加载');
               //var data = self.data.circle_list;
                var that = this;
                //检测到触底操作，请求后台获取下一页数据追加到已有数据后面
               wx.request({
                   url: app.globalData.serverUrl + 'jiazai',
                   data: {
                       curr_page: that.data.curr_page,
                   },
                   success: function (res) {
                       if (res) {
                           console.log(res.data);
                           for (var i = 0; i < res.data.length; i++) {
                               that.data.circle_list.push(res.data[i]);
                           }
                           that.setData({
                               circle_list: that.data.circle_list,
                            });
                        that.data.curr_page++;
                       }
                   }
               })

           }
       }
       // end: 触摸结束
   })